<template>
  <view>
    <view :key="index1" v-for="(item, index1) in list">
      <view class="ul">
        <view class="content">
          <view class="name">
            {{ item.title }}
          </view>

          <view class="local">
            {{ item.description }}
          </view>

          <view class="tips">
            {{ item.add_time }}
            <text v-show="item.end_time">
              至 {{ item.end_time ? item.end_time : "" }}
            </text>
          </view>
          <view class="addr">
            <view>
              <u-icon class="phone" name="phone-fill"></u-icon>{{ item.tell }}
            </view>
            <view v-if="item.state==0" class="status not"> {{ statusInfor[item.state] }} </view>
            <view  v-else-if="item.state==1" class="status over"> {{ statusInfor[item.state] }} </view>
            <view v-else-if="item.state==2" class="status back"> {{ statusInfor[item.state] }} </view>
            <view v-else class="status"> {{ statusInfor[item.state] }} </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      statusInfor:['未处理','已受理','已驳回','已完结'] //// 0:未处理,1:已受理,2:已驳回,3:已完结
    };
  },

  methods: {},
};
</script>
<style>
page {
  background: rgb(245, 247, 249);
}
</style>
<style lang="scss" scoped>
.ul {
  position: relative;
  margin: 8px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  background: #fff;
  margin-bottom: 8px;
  padding: 8px 10px;

  .content {
    flex: 1;
    .name {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
    }
    .local {
      padding: 5px 0 0 0;
      font-size: 12px;
      color: #606266;
    }

    .labels {
      padding: 5px 0;

      .tags {
        margin-right: 8px;
        background-color: #f6f7fb;
        color: #545559;
        border: 1px solid #f6f7fb;
        margin-bottom: 5px;
      }
    }

    .tips {
      font-size: 12px;
      color: #999999;
      margin: 5px 0;
    }

    .addr {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 22rpx;
      color: #999999;
      .phone {
        color: rgb(22, 132, 252);
      }
      .map {
        margin-right: 8rpx;
      }

      .status {
        color: #fff;
        font-size: 10px;
        min-width: 100rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
         background: #ccc;
        &.not{
           background: rgb(236, 56, 56);
        }
        &.over{
           background: rgb(44, 190, 105);
        }
        &.back{
           background: rgb(98, 156, 231);
        }

      }
    }
  }
}
</style>
